<template>
  <div class="songsdatabox">
    <div class="box">
      <div class="left">
        <div class="leftbox">
          <div class="lefttop" v-if="iscreated">
            <div class="leftimg">
              <img :src="albundata.playlist.coverImgUrl" alt="" class="img1" />
            </div>
            <div class="rightbtn">
              <div class="btn1 btn">
                <span class="bgimg1"></span>
                <span class="spantext1">{{ albundata.playlist.name }}</span>
              </div>
              <div class="btn2 btn">
                <span class="bgimg2">
                  <img
                    :src="albundata.playlist.creator.avatarUrl"
                    alt=""
                    class="photo"
                  />
                </span>
                <div class="spanboxright">
                  <span class="name">
                    <a href="#">{{ albundata.playlist.creator.nickname }}</a>
                  </span>
                  <span class="time">
                    {{ handletime }}
                  </span>
                </div>
              </div>
              <div class="btn3 btn">
                <a href="#" class="btn3a a1">
                  <span class="a-img1">
                    <a href="#" class="actionbtn"></a>
                    <a href="#" class="actiontext">播放</a>
                  </span>
                  <span class="a-img2"></span>
                </a>
                <a href="#" class="btn3a a2">
                  <span class="a2-span">(11万)</span>
                </a>
                <a href="#" class="btn3a a3">
                  <span class="a2-span">(1万)</span>
                </a>
                <a href="#" class="btn3a a4">
                  <span class="a2-span">下载</span>
                </a>
                <a href="#" class="btn3a a5">
                  <span class="a2-span">(100)</span>
                </a>
              </div>
              <div class="btn4 btn">
                标签
                <span
                  class="tag"
                  v-for="(data, index) in albundata.playlist.tags"
                  :key="index"
                >
                  {{ data }}
                </span>
              </div>
            </div>
          </div>
          <div class="leftbody">
            <div class="bodytop">
              <p class="bodytop-p btp1">歌曲列表</p>
              <p class="bodytop-p btp2">n首歌</p>
            </div>
            <div class="songsbody">
              <table class="songsbody-table">
                <tr>
                  <td class="songsbody-td songb1"></td>
                  <td class="songsbody-td songb2">歌曲标题</td>
                  <td class="songsbody-td songb3">时长</td>
                  <td class="songsbody-td songb4">歌手</td>
                  <td class="songsbody-td songb5">专辑</td>
                </tr>
                <tr v-for="(data, index) in songsdata" :key="index">
                  <td class="tddata tddata1">
                    {{ index + 1 }}
                    <a href="#" class="actionimg"></a>
                  </td>
                  <td class="tddata tddata2">
                    <span class="td2span" @click="playsong(data.id)">{{
                      data.name
                    }}</span>
                  </td>
                  <td class="tddata tddata3">
                    {{ handleminutes(data.dt) }}
                  </td>
                  <td class="tddata tddata4">
                    <span class="td4span">{{ data.ar[0].name }}</span>
                  </td>
                  <td class="tddata tddata5">
                    <span class="td5span">{{ data.al.name }}</span>
                  </td>
                </tr>
              </table>
            </div>
            <div>下载</div>
          </div>
          <div class="leftbottom"></div>
        </div>
      </div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
export default {
  setup () {},
  data () {
    return {
      // 获取歌单详情
      albundata: [],
      // 获取歌单歌曲
      songsdata: [],
      iscreated: false
    }
  },
  mounted () {
    // 获取数据
    if (this.$store.state.albunid) {
      this.getalbundata()
      this.getsongsdata()
    }
  },
  methods: {
    // 获取歌单详情
    getalbundata () {
      this.maxaxios
        .get('/playlist/detail', { id: this.$store.state.albunid })
        .then((res) => {
          this.albundata = res
          this.iscreated = true
          // console.log(res);
        })
    },
    // 获取歌单歌曲
    getsongsdata () {
      this.maxaxios
        .get('/playlist/track/all', {
          id: this.$store.state.albunid,
          limit: 10
        })
        .then((res) => {
          this.songsdata = res.songs
          // console.log(res.songs);
        })
    },
    // 歌曲详情
    playsong (id) {
      // this.$router.push("/playsong");
      // this.$store.commit("ChangeSongsDetailID",id)
      this.$router.push({
        path: `/playsong/${id}`
      })
      // console.log(id);
    }
  },
  computed: {
    // 歌单创建日期
    handletime () {
      // this.albundata.playlist.createTime;
      const createtime = new Date(this.albundata.playlist.createTime)
      return (
        createtime.getFullYear() +
        '-' +
        (createtime.getMonth() + 1) +
        '-' +
        createtime.getDate() +
        '创建'
      )
    },
    // 换算分钟
    handleminutes () {
      return function (tiem) {
        const minutes = parseInt((tiem % (1000 * 60 * 60)) / (1000 * 60))
        const seconds = parseInt((tiem % (1000 * 60)) / 1000)
        return minutes + ':' + seconds
      }
    }
  }
}
</script>

<style scoped>
.songsdatabox {
  width: 100%;
  margin: auto;
  background-color: #f5f5f5;
}
.box {
  width: 1000px;
  margin: auto;
  background-color: white;
  border: 1px solid #d3d3d3;
}
.box::after {
  content: "";
  clear: both;
  display: block;
}
.left {
  width: 750px;
  float: left;
}
.leftbox {
  padding: 47px 30px 40px 39px;
}
.lefttop::after {
  content: "";
  display: block;
  clear: both;
}
.leftimg {
  width: 200px;
  height: 200px;
  float: left;
}
.img1 {
  width: 200px;
  height: 200px;
}
.rightbtn {
  width: 480px;
  height: 200px;
  /* background-color: red; */
  float: left;
}
.btn {
  width: 400px;
  height: 30px;
  margin-left: 30px;
  position: relative;
}
.btn::after {
  content: "";
  display: block;
  clear: both;
}
.btn1 {
  /* height: 26px; */
  /* background-color: rgb(242, 255, 0); */
  margin-bottom: 10px;
}
.bgimg1 {
  width: 60px;
  height: 25px;
  display: inline-block;
  background-image: url(../../../../public/img/icon.png);
  background-repeat: no-repeat;
  background-position: 0 -243px;
}
.spantext1 {
  font-size: 20px;
  display: inline-block;
  position: absolute;
}
.btn2 {
  height: 35px;
  /* background-color: rgb(0, 255, 17); */
  margin-bottom: 20px;
}
.bgimg2 {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  margin-right: 20px;
  float: left;
}
.photo {
  width: 100%;
  height: 100%;
}
.spanboxright {
  float: left;
}
.name {
  display: inline-block;
  line-height: 35px;
  margin-right: 10px;
}
.name:hover a {
  border-bottom: 1px solid #0c73c2;
}
.name a {
  font-size: 12px;
  color: #0c73c2;
}
.time {
  display: inline-block;
  line-height: 35px;
  font-size: 12px;
  color: #999;
}
.btn3 {
  height: 31px;
  /* background-color: rgb(0, 255, 179); */
  margin-bottom: 30px;
}
.btn3a {
  width: 50px;
  height: 31px;
  float: left;
  display: block;
}
.a1 {
  width: 91px;
  height: 31px;
  /* background-color: #9b0909; */
  margin-right: 5px;
}
.a1::after {
  content: "";
  clear: both;
  display: block;
}
.a-img1 {
  display: inline-block;
  width: 60px;
  height: 31px;
  /* background-color: #9b0996; */
  background-position: 0 -387px;
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
}
.a-img1::after {
  content: "";
  clear: both;
  display: block;
}
.actionbtn {
  width: 20px;
  height: 18px;
  display: inline-block;
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1622px;
  float: left;
  margin: 6px 2px 2px 5px;
}
.actiontext {
  display: inline-block;
  float: left;
  line-height: 31px;
  color: white;
  font-size: 12px;
}
.a-img2 {
  display: inline-block;
  width: 30px;
  height: 31px;
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1588px;
  margin-left: 1px;
}
.a2 {
  width: 70px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -977px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.a2-span {
  font-size: 12px;
  display: inline-block;
  line-height: 31px;
  position: absolute;
  left: 25px;
}
.a3 {
  width: 70px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1225px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.a4 {
  width: 60px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -2761px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.a5 {
  width: 70px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1465px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.btn4 {
  /* background-color: rgb(0, 85, 255); */
  line-height: 31px;
  font-size: 12px;
}
.tag {
  display: inline-block;
  font-size: 12px;
  color: #777;
  padding: 0px 5px;
  border: 1px solid #777;
  line-height: 18px;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.leftbody {
  margin-top: 27px;
}
.bodytop {
  height: 33px;
  position: relative;
  border-bottom: 2px solid #c20c0c;
}
.bodytop::after {
  content: "";
  clear: both;
  display: block;
}
.bodytop-p {
  float: left;
}
.btp1 {
  font-size: 25px;
  margin-right: 20px;
}
.btp2 {
  line-height: 20px;
  font-size: 12px;
  margin-top: 9px;
  color: #666;
}
.songsbody {
  margin-top: 10px;
}
.songsbody-table {
  border-collapse: collapse;
  border: 1px solid #d9d9d9;
}
.songsbody-td {
  width: 70px;
  height: 32px;
  color: #666;
  font-size: 12px;
  padding-left: 10px;
}
.songb1 {
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
.songb2 {
  width: 230px;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
.songb3 {
  width: 80px;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
.songb4 {
  width: 90px;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
.songb5 {
  width: 130px;
  border-bottom: 1px solid #d9d9d9;
}
.tddata {
  width: 70px;
  height: 32px;
  color: #666;
  font-size: 12px;
  padding-left: 10px;
}
.tddata1 {
  padding-left: 20px;
  width: 50px;
}
.tddata2 {
  width: 230px;
}
.tddata3 {
  width: 80px;
}
.tddata4 {
  width: 90px;
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
}
.td2span {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}
.td4span {
  display: inline-block;
  width: 60px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}
.tddata5 {
  width: 130px;
}
.td5span {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}
.actionimg {
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(../../../../public/img/table.png);
  background-position: 0 -103px;
  float: right;
  margin-right: 20px;
}
/* 右边 */
.right {
  width: 250px;
  float: left;
}
</style>
